<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导航</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("li").click((l) => {
            $(".active").removeClass("active");
            $(l).addClass("active");
        });
    });
    </script>
</head>

<body>
    <div id="navbar">
        <ul class="nav nav-tabs">
            <li class="active"><a href="main.html" target="main">查看猫咪</a></li>
            <li><a href="#" target="main">科普信息</a></li>
            <li><a href="#" target="main">关于我们</a></li>
            <li><a href="#" target="main">更多信息</a></li>
        </ul>
    </div>
</body>

</html>